<form action="<?php echo site_url().uri_string() ?>" method="post">
<div class="container">
  <div class="bg-putih">

    <div class="jdl-page">
      <?php echo $judul ?>
      <div class="clearfix"></div>
    </div>
    
      <div class="row form-horizontal">
        <div class="col-xs-5">
          <div class="form-group">
            <label class="col-xs-5 control-label">User</label>
            <div class="col-xs-7">
              <input type="text" value="<?php echo $data['first_name'] ?>" name="user" class="form-control input-sm" disabled="disabled"/>
              <input type="hidden" value="<?php echo $data['id_user'] ?>" name="user" class="form-control input-sm"/>
            </div>
          </div>
        </div>
        <div class="col-xs-5">
          <div class="form-group">
            <label class="col-xs-5 control-label">Tanggal</label>
            <div class="col-xs-7">
              <input type="text" value="<?php echo $data['Tanggal'] ?>" name="user" class="form-control input-sm" disabled="disabled"/>
              <input type="hidden" value="<?php echo $data['Tanggal'] ?>" name="tanggal" class="form-control input-sm"/>
            </div>
          </div>
        </div>
      </div>

      <div style="margin-bottom: 15px;">
        <a id="btn-tambah-beli" onclick="beli_add_row()" href="javascript:void(0)" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> Tambah Record</a>
      </div>
      <table class="table table-hover">
        <tr>
          <th width="30%">Obat</th>
          <th width="30%">Jumlah</th>
          <th width="30%">Harga</th>
          <th></th>
        </tr>
        <script type="text/javascript">
          function beli_add_row() {
            var tampil_tombol_aksi = '<a href="javascript:void(null)" title="Hapus" onclick="destroy_row(this)"><span class="btn btn-xs btn-danger btn-flat glyphicon  glyphicon-trash"></span></a>';
            var tr = document.createElement('tr');
            var td_obat = document.createElement('td');
            var td_jumlah = document.createElement('td');
            var td_harga = document.createElement('td');
            var td_aksi = document.createElement('td');     
            var tbodi = document.getElementById("beli-add-cont");

            td_aksi.className = 'links';

            td_obat.innerHTML = "<select class='form-control obat' name='obat[]'><?php foreach($obat as $value) { echo "<option value=$value[KdObat]>$value[NmObat]</option>";}?></select>";
            td_jumlah.innerHTML = "<input type='text' name='jumlah[]' class='form-control input-sm'/>";
            td_harga.innerHTML = "<input type='text' name='harga[]' class='form-control input-sm'/>";
            td_aksi.innerHTML = tampil_tombol_aksi;
            tr.appendChild(td_obat);
            tr.appendChild(td_jumlah);
            tr.appendChild(td_harga);
            tr.appendChild(td_aksi);
            tbodi.appendChild(tr);
            $(".obat").select2();
          }
          $(document).ready(function() {
            $(".obat").select2();
          });
        </script>
        <tbody id="beli-add-cont">
          <?php foreach($detail_beli as $detail_res): ?>
            <tr>
              <td>
              <script type="text/javascript">
                $(document).ready(function() {
                  $(".obat").select2();
                });
              </script>
              <select name="obat[]" class="form-control obat">
                <?php foreach($obat as $obat_res): ?>
                  <?php if($obat_res['KdObat'] == $detail_res['KdObat']): ?>
                    <option value="<?php echo $obat_res['KdObat'] ?>" selected="selected"><?php echo $obat_res['NmObat'] ?></option>
                  <?php else: ?>
                    <option value="<?php echo $obat_res['KdObat'] ?>"><?php echo $obat_res['NmObat'] ?></option>
                  <?php endif; ?>
                <?php endforeach; ?>
              </select>
              </td>
              <td>
                <input type="text" name="jumlah[]" class="form-control input-sm" value="<?php echo $detail_res['Jumlah'] ?>" />
              </td>
              <td>
                <input type="text" name="harga[]" class="form-control input-sm" value="<?php echo $detail_res['Harga'] ?>" />
              </td>
              <td>
                <a href="javascript:void(null)" title="Hapus" onclick="destroy_row(this)"><span class="btn btn-xs btn-danger btn-flat glyphicon  glyphicon-trash"></span></a>
                <script type="text/javascript">
                  function destroy_row(obj){
                    if (confirm('Anda yakin ingin menghapus baris ini ?')) {
                      obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
                    }
                  }
                </script>
              </td>
            </tr>
          <?php endforeach; ?>
          <?php if(count($detail_beli) == 0): ?>
            <tr>
              <td align="center" colspan="3">Tidak ada detail pembelian</td>
            </tr>
          <?php endif; ?>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4">
            Keterangan
            <textarea class="form-control input-sm" name="keterangan"><?php echo $data['Keterangan'] ?></textarea>
          </td>
        </tr>
      </tfoot>
    </table>
    <div align="right"><input type="submit" class="btn btn-sm btn-primary" value="Update"/></div>
</div>
</div>
</form>